<template>
    <div id="app">
        <Header/>
        <div class="contentWeb">
            <!--      banner-->
            <div class="indexFirst">
                <div class="indexLeft">
                    <div class="jobtab" v-for="(item, index) in typeList" :key="index">
                      <div  v-if="index < 6">
                        <a :href="(shenfen == 1?'findUser.html?industry=':'job.html?industry=') + encodeURI(encodeURI(item.name))"><b>{{item.name}}</b></a>
                        <a :href="(shenfen == 1?'findUser.html?industry=':'job.html?industry=') + encodeURI(encodeURI(kn.name))"
                        v-for="(kn, kindex) in item.contentSet" :key="kindex">{{kn.name}}</a>
                      </div>
                    </div>
                    <div class="seemore">
                        <a :href="shenfen == 1 ? 'findUser.html' : 'job.html'">{{shenfen == 1? '查看全部人才' :'查看全部职位'}}></a>
                    </div>
                </div>
                <div class="indexCenter">
                    <el-carousel style="width: 550px;
      height: 360px;
      vertical-align: top;">
                    <el-carousel-item v-for="(item,index) in banner" :key="index" style="width: 550px;
      height: 360px;
      vertical-align: top;">
                    <img v-if="item.targetUrl != ''" :src="item.picurl" class="bannerimg" @click="toUrl(item.targetUrl)" style="
      width: 550px;
      height: 360px;
      vertical-align: top;
    "/>
                        <img v-else :src="item.picurl" class="bannerimg" style="
      width: 550px;
      height: 360px;
      vertical-align: top;
    "/>
                    </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="indexRight">
                    <div v-for="(item, index) in adList" :key="index" :class="index ==0 ? 'ad1': 'ad2'">
                        <div v-if="index < 2">
                          <img :src="item.picurl"  @click="toUrl(item.targetUrl)" v-if="item.targetUrl != ''"/>
                          <img :src="item.picurl"  v-else/>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <!--      热门岗位-->
            <div class="hotGw" v-if="shenfen == 2">
                <div class="indextitle clear">
                    <div class="leftT hot">热门岗位</div>
                    <div class="rightT"></div>
                </div>
                <div class="clear">
                    <div class="tabgw" v-for="(item, index) in gwList" :key="index">
                        <el-row :gutter="0" class="nrth" @click.native="tocompany(item.enterpriseUid)">
                            <el-col :span="10" class="clear">
                                <img :src="item.logo" class="logo"/>
                                <div class="tname">{{item.companyName}}</div>
                            </el-col>
                            <el-col :span="14" style="text-align: right">
                                <div class="desc clear">
                                    <span v-if="item.industry" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 80px;" >{{item.industry}}</span>
                                    <span v-if="item.companySize" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 80px;" >{{item.companySize}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="0" @click.native="tojob(item.id)" style="cursor: pointer;">
                            <el-col :span="16">
                                <div class="" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 290px;font-size: 20px;
      text-align: left;
      color: #1e1e1e;
      line-height: 27px;">{{item.positionName}}</div>

                            </el-col>
                            <el-col :span="8" style="text-align: right">
                                <div class="jine">{{item.wageRange}}</div>
                            </el-col>
                        </el-row>
                        <el-row class="desc">
                                    <span v-if="item.saveCity" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 105px;" >{{item.saveCity}}</span>
                                    <span v-if="item.experience" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 105px;" >{{item.experience}}</span>
                                    <span v-if="item.educational" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 105px;" >{{item.educational}}</span>
                        </el-row>
                    </div>
                </div>
            </div>
            <!--      优选企业-->
            <div class="yxcompany" v-if="shenfen == 2">
                <div class="indextitle clear">
                    <div class="leftT youxuan">优选企业</div>
                    <div class="rightT"><a href="company.html">更多 ></a></div>
                </div>
                <div class="clear">
                  <div class="qiye-box" v-for="(item, index) in qyList" :key="index" @click="tocompany(item.enterpriseUid)">
                    <el-image class="qy-logo" :src="item.logo"/>
                    <p class="title">{{item.name}}</p>
                    <p class="qy-tag">
                      <span v-if="item.enterpriseNature">{{item.enterpriseNature}}</span>
                      <span>{{item.industry}}</span>
                    </p>
                    <p class="qy-hot"><span>{{item.positionSet.length}}</span>个招聘中的职位</p>
                  </div>
                </div>
                <!-- <div class="clear">
                    <div class="tabqy" v-for="(item, index) in qyList" :key="index" @click="tocompany(item.enterpriseUid)">
                        <div class="biaozhi">
                          <el-image :src="item.logo" style="width: 64px;height: 64px"/>
                        </div>
                        <div class="title">{{item.name}}</div>
                        <div class="tag"><span
                                v-if="item.enterpriseNature" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 60px;">{{item.enterpriseNature}}</span><span style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 105px;">{{item.industry}}</span>
                        </div>
                        <div class="jobnum"><span class="on">{{item.zprs}}</span><span>个招聘中的职位</span></div>
                    </div>
                </div> -->
            </div>
            <!--推荐人才-->
            <div v-if="shenfen == 1">
                <div class="indextitle clear">
                    <div class="leftT rencai">推荐人才</div>
                    <div class="rightT"><a href="findUser.html">更多 ></a></div>
                </div>
                <el-row :gutter="20">
                    <el-col :span="8" v-for="(item, index) in PersonList" :key="index">
                        <div class="qiuzhizheK clear" @click="todetail(item.userUid)" style="height: 165px">
                            <div class="photo">
                                <img :src="item.header">
                            </div>
                            <div class="letfname">
                                <h3>{{item.name}}</h3>
                                <div class="desc">
                                    <span>{{item.sex == 1 ? '男' : item.sex == 2 ? '女' : '保密'}}</span>
                                    <span>{{item.age}}岁</span>
                                    <span>{{formatYear(item)}}</span>
                                </div>
                                <div class="desc" style="color: #999; padding-bottom: 5px;">现住{{item.liveAddress}}</div>
                                <div class="ms" >
                                  <p style="overflow: hidden; height:26px"><img src="../../assets/img/zhiwei.png">{{item.position}}</p>
                                  <p style="overflow: hidden; height:26px"><img src="../../assets/img/hangy.png">{{item.industry}}</p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--      资讯-->
            <div class="zxcontent clear">
                <div class="zxTab">
                    <div class="indextitle clear">
                        <div class="leftT gongju">职场资讯</div>
                        <div class="rightT"><a href="/jobNews.html">更多 ></a></div>
                    </div>
                    <div class="kuantT">
                        <div class="tabnamest clear">
                            <div :class="zhichangValue == item.id ? 'tabtab on': 'tabtab'"
                                 @click="getzc(item.id)"
                                 v-for="(item, index) in zhichangList" :key="index">{{item.subTypeName}}
                            </div>
                        </div>
                        <div class="zhuticont">
                            <div class="tabli" v-for="(item, index) in zcList" :key="index">
                                <a :href="'/jobnewsDetail.html?id=' + item.id" style="display: block">
                                    <div style="clear: both; overflow: hidden">
                                        <div class="tname" style="display: flex; align-items:center;"><img v-if="1 == item.isTop" src="../../assets/img/top.png" style="width: 55px;margin-right: 20px; height: 25px;" />{{item.title}}</div>
                                        <div class="dtime">{{item.createTime}}</div>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="zxTab right">
                    <div class="indextitle clear">
                        <div class="leftT zixun">本地资讯</div>
                        <div class="rightT">
                            <a href="/localNews.html">更多 ></a>
                        </div>
                    </div>
                    <div class="kuantT">
                        <div class="tabnamest clear">
                            <div :class="bendiValue == item.id ? 'tabtab on': 'tabtab'"
                                 @click="getbd(item.id)"
                                 v-for="(item, index) in bendiList" :key="index">{{item.subTypeName}}
                            </div>
                        </div>
                        <div class="zhuticont">
                            <div class="tabli" v-for="(item, index) in bdList" :key="index">

                                <a :href="'/newsDetail.html?id=' + item.id" style="display: block">
                                <div style="clear: both; overflow: hidden">
                                    <div class="tname" style="display: flex; align-items:center;"><img v-if="1 == item.isTop" src="../../assets/img/top.png" style="width: 55px;margin-right: 20px; height: 25px;" />{{item.title}}</div>
                                    <div class="dtime">{{item.createTime}}</div>
                                </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import mt from '../../assets/img/mt.png'
import {
  EnterpriseByPageInfo,
  PositionByPageInfo,
  OccupationType,
  CommonPicList,
  InquityLocalByType,
  CommonInfoBySecondType,
  RecommendPersonList,
  WorkplaceInquiryState, LocalInquiryState
} from '../../assets/js/domains'
// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import { directive } from 'vue-awesome-swiper'
import 'swiper/swiper.min.css'

export default {
  name: 'Home',
  components: {
    Header,
    Footer
    // Swiper,
    // SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data: function () {
    return {
      mt: mt,
      shenfen: 2,
      PersonList: [],
      banner: {},
      adList: [{}, {}],
      typeList: [],
      gwList: [], // 热门岗位
      qyList: [], // 优秀企业
      zhichangValue: '39', // 控制职场
      bendiValue: '42', // 控制职场
      zhichangList: [],
      bendiList: [],
      zcList: [],
      bdList: [],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      }
    }
  },
  created: function () {
    if (localStorage.getItem('shenfen')) {
      this.shenfen = localStorage.getItem('shenfen')
    }
    document.title = '东港人社网'
  },
  computed: {
    swiper: function () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted: function () {
    this.getOccupationType()
    this.getCommonPicList()
    this.getAdvImages()
    this.getPositionByPageInfo()
    this.getEnterpriseByPageInfo()
    this.getLocalInquiryState()
    this.getWorkplaceInquiryState()
    if (this.shenfen === 1) {
      this.getRecommendPersonList()
    }
  },
  methods: {
    formatYear (item) {
      if (!item || !item.workYear) {
        return '未知'
      }
      if (item.workYear <= 0) {
        return '刚参加工作'
      }
      return `已工作${item.workYear}年`
    },
    getLocalInquiryState: function () {
      const _this = this
      LocalInquiryState().then(function (res) {
        if (res.code === 200) {
          _this.bendiList = res.data
          if (_this.bendiList.length > 0) {
            _this.bendiValue = _this.bendiList[0].id
            _this.getbd(_this.bendiValue)
          }
        }
      })
    },
    getWorkplaceInquiryState: function () {
      const _this = this
      WorkplaceInquiryState().then(function (res) {
        if (res.code === 200) {
          _this.zhichangList = res.data
          if (_this.zhichangList.length > 0) {
            _this.zhichangValue = _this.zhichangList[0].id
            _this.getzc(_this.zhichangValue)
          }
        }
      })
    },
    todetail: function (id) {
      window.location.href = 'personResume.html?id=' + id
    },
    getRecommendPersonList: function () {
      const _this = this
      const id = localStorage.getItem('md_user_uid')

      RecommendPersonList({ pageNum: 1, pageSize: '9', id }).then(function (res) {
        if (res.code === 200) {
          _this.PersonList = res.data.content
        }
      })
    },
    getCommonPicList: function () {
      const _this = this
      CommonPicList({ pic_type: 'w_banner' }).then(function (res) {
        if (res.code === 200) {
          _this.banner = res.data
        }
      })
    },
    getEnterpriseByPageInfo: function () {
      const _this = this
      EnterpriseByPageInfo({
        pageNum: 1,
        pageSize: 9
      }).then(function (res) {
        if (!res || !res.length) {
          return
        }
        _this.qyList = res
        // if (res.code === 200) {
        //   _this.qyList = res.data
        // }
      })
    },
    getAdvImages: function () {
      const _this = this
      CommonPicList({ pic_type: 'adv_r_t' }).then(function (res) {
        if (res.code === 200) {
          _this.adList[0] = { picurl: res.data[0].picurl, targetUrl: res.data[0].targetUrl }
        }
      })
      CommonPicList({ pic_type: 'adv_r_b' }).then(function (res) {
        if (res.code === 200) {
          _this.adList[1] = { picurl: res.data[0].picurl, targetUrl: res.data[0].targetUrl }
        }
      })
    },
    getPositionByPageInfo: function () {
      const _this = this
      PositionByPageInfo({
        pageNum: 1,
        pageSize: 6
      }).then(function (res) {
        if (!res || !res.length) {
          return
        }
        _this.gwList = res
        // if (res.code === 200) {
        //   _this.gwList = res.data.content
        // }
      })
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        if (res.code === 200) {
          _this.typeList = res.data
        }
      })
    },
    getzc: function (id) {
      const _this = this
      _this.zhichangValue = id
      CommonInfoBySecondType({
        pageNum: 1,
        pageSize: 5,
        type: id
      }).then(function (res) {
        if (res.code === 200) {
          _this.zcList = res.data
        }
      })
    },
    getbd: function (id) {
      const _this = this
      _this.bendiValue = id
      InquityLocalByType({
        pageNum: 1,
        pageSize: 5,
        type: id
      }).then(function (res) {
        if (res.code === 200) {
          _this.bdList = res.data.content
        }
      })
    },
    tojob: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    },
    tocompany: function (id) {
      window.location.href = 'companyDetail.html?enterpriseUid=' + id
    },
    toUrl: function (url) {
      if (url.search('http') === -1) {
        url = 'http://' + url
      }
      window.location.href = url
    }
  }
}
</script>
<style lang="less">
    @import "../../assets/css/home";

  .qiye-box{
    position: relative;
    width: 398px;
    background: #ffffff;
    margin-right: 23px;
    margin-bottom: 23px;
    padding: 15px 15px 15px 120px;
    float: left;
    &:nth-child(3n){margin-right: 0;}
    .qy-logo{
      position: absolute;
      width: 80px;
      height: 100px;
      top: 20px;
      left: 15px;
    }
    .title{
      font-size: 20px;
      line-height: 22px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: rgb(30, 30, 30)
    }
    .qy-tag{
      margin: 5px 0;
      span{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 60px;
        height: 22px;
        font-size: 14px;
        display: inline-block;
        color: #8d8e9c;
        position: relative;
        line-height: 22px;
        padding: 10px;
        &:after{
          position: absolute;
          content: '';
          right: 0;
          top: 12px;
          width: 1px;
          height: 18px;
          border-right: 1px solid #dcdee0;
        }
        &:last-child:after{display: none;}
      }
    }
    .qy-hot{
      margin: 0 auto;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      background: #f6f6f8;
      span{color: #20a2b2;padding-right: 5px;}
    }

  }
</style>
